<template>
    <div style="width:100%;">
    <div style="padding: 50px">
        <div>
<!--        以下代码是搜索选项框的展示-->
        <el-row :gutter="20" style="height: 30px">
            <el-form ref="form" label-width="80px">

            <el-col :span="6">
                <div>
                    <el-form-item label-width="auto">
                        <el-input v-model="form_search.person_name" placeholder="客户姓名" size="mini"></el-input>
                    </el-form-item>
                </div>
            </el-col>
            <el-col :span="1">
                <div>
                    <el-form-item label-width="auto" >
                <el-button type="primary" @click="search_person(4,page_select.current_page)" size="mini">查询</el-button>
                    </el-form-item>
                </div>
            </el-col>
            <el-col :span="5">
                <div>
                    <el-form-item label-width="auto" >
                    <el-button @click="handleCheckinDialogOpen()" size="mini" ><i class="el-icon-plus"></i> 登记</el-button>
                    </el-form-item>
                </div>
            </el-col>
            </el-form>
        </el-row>

            <el-divider></el-divider>
        <el-row :gutter="20" style="height: 30px">
            <el-col :span="10">
                <el-button-group style="float: left">
                    <el-button @click="search_person(1,page_select.current_page)" >活力老人</el-button>
                    <el-button @click="search_person(2,page_select.current_page)" >自理老人</el-button>
                    <el-button @click="search_person(3,page_select.current_page)" >护理老人</el-button>
                </el-button-group>
            </el-col>
        </el-row>
<!--        以下代码是老人列表的展示-->
        <template>
            <el-table
                    :data="person_list"
                    style="width: 100%"
                    highlight-current-row
                    size="mini"
                    >
                <el-table-column
                        prop="id"
                        label="编号"
                        width="100px"
                        >
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="客户姓名"
                        width="70px"
                        >
                </el-table-column>
                <el-table-column
                        prop="gender"
                        label="性别"
                        width="50px">
                </el-table-column>
                <el-table-column
                        prop="age"
                        label="年龄"
                        width="50px">
                </el-table-column>
                <el-table-column
                        prop="height"
                        label="身高/cm"
                        width="50px">
                </el-table-column>
                <el-table-column
                        prop="weight"
                        label="体重/kg"
                        width="50px">
                </el-table-column>
                <el-table-column
                        prop="blood_type"
                        label="血型"
                        width="50px">
                </el-table-column>
                <el-table-column
                        prop="marital_status"
                        label="婚姻状况"
                        width="70px">
                </el-table-column>
                <el-table-column
                        prop="nursing_level"
                        label="护理等级"
                        width="70px">
                </el-table-column>
                <el-table-column
                        prop="identify_number"
                        label="身份证号"
                        width="150px">
                </el-table-column>
                <el-table-column
                        prop="room_number"
                        label="房间号"
                        width="70px">
                </el-table-column>
                <el-table-column
                        prop="building_number"
                        label="所属楼房"
                        width="70px">
                </el-table-column>
                <el-table-column
                        prop="bed_number"
                        label="床位号"
                        width="70px">
                </el-table-column>
                <el-table-column
                        prop="file_number"
                        label="档案号"
                        width="100px">
                </el-table-column>
                <el-table-column
                        prop="checkin_time"
                        label="入住时间"
                        width="90px">
                </el-table-column>
                <el-table-column
                        prop="contract_expiry_time"
                        label="合同到期时间"
                        width="100px">
                </el-table-column>
                <el-table-column
                        prop="tel"
                        label="联系电话"
                        width="100px">
                </el-table-column>
                <el-table-column
                        prop="family_member_name"
                        label="家属"
                        width="70px">
                </el-table-column>
                <el-table-column
                        prop="accompany_name"
                        label="陪住人"
                        width="70px">
                </el-table-column>
                <el-table-column
                        prop="evaluate_doctor"
                        label="评估医生"
                        width="70px">
                </el-table-column>
                <el-table-column
                        prop="in_charge_doctor"
                        label="负责医生"
                        width="70px">
                </el-table-column>
                <el-table-column
                        prop="care_worker"
                        label="护工"
                        width="70px">
                </el-table-column>
                <el-table-column
                        prop="health_keeper"
                        label="健康管家"
                        width="70px">
                </el-table-column>
                <el-table-column
                        prop="remark"
                        label="备注"
                        min-width="200px">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="110">
                    <template slot-scope="scope">
                        <el-button @click="handleDetailDialogOpen(scope.row)" type="text" size="small">查看详情</el-button>
                        <el-button @click="handleChangeDialogOpen(scope.row)" type="text" size="small">修改</el-button>
<!--                        -->
<!--    注意：此条按钮已被拒绝                    <el-button @click="handleDelete(scope.row)" type="text" size="small" style="color: orangered">删除</el-button>-->
<!--                        注意这里的scope.row直接就包含了所有的数据-->
                    </template>
                </el-table-column>
            </el-table>
        </template>
<!--        以下是修改老人信息的dialog界面-->
        <change_detail_dialog ref="change_detail_dialog"></change_detail_dialog>
        <new_person_dialog ref="new_person_dialog"></new_person_dialog>
            <!--        以下是查看老人详细信息的dialog界面-->
            <el-dialog
                    title="详情概览"
                    :visible.sync="detail_dialog_visible"
                    width="40%"
                    style="min-width: 800px">
                <el-descriptions class="margin-top" title="" :column="2" border>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-tickets"></i>
                            客户编号
                        </template>
                        {{detail_data.id}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-user"></i>
                            客户姓名
                        </template>
                        {{detail_data.name}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-user-solid"></i>
                            客户性别
                        </template>
                        {{detail_data.gender}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-user-solid"></i>
                            年龄
                        </template>
                        {{detail_data.age}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-user-solid"></i>
                            身高/cm
                        </template>
                        {{detail_data.height}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-user-solid"></i>
                            体重/kg
                        </template>
                        {{detail_data.weight}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-user-solid"></i>
                            血型
                        </template>
                        {{detail_data.blood_type}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-moon"></i>
                            婚姻状况
                        </template>
                        {{detail_data.marital_status}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-help"></i>
                            护理等级
                        </template>
                        {{detail_data.nursing_level}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-tickets"></i>
                            身份证号
                        </template>
                        {{detail_data.identify_number}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-location-information"></i>
                            房间号
                        </template>
                        {{detail_data.room_number}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-location-information"></i>
                            所属楼房
                        </template>
                        {{detail_data.building_number}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-location-information"></i>
                            床位号
                        </template>
                        {{detail_data.bed_number}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-files"></i>
                            档案号
                        </template>
                        {{detail_data.file_number}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-time"></i>
                            入住时间
                        </template>
                        {{detail_data.checkin_time}}
                    </el-descriptions-item>

                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-time"></i>
                            合同到期时间
                        </template>
                        {{detail_data.contract_expiry_time}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-phone"></i>
                            联系电话
                        </template>
                        {{detail_data.tel}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-user"></i>
                            家属名
                        </template>
                        {{detail_data.family_member_name}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-user"></i>
                            陪住人
                        </template>
                        {{detail_data.accompany_name}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-user"></i>
                            评估医生
                        </template>
                        {{detail_data.evaluate_doctor}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-user"></i>
                            负责医生
                        </template>
                        {{detail_data.in_charge_doctor}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-user"></i>
                            护工
                        </template>
                        {{detail_data.care_worker}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-user"></i>
                            健康管家
                        </template>
                        {{detail_data.health_keeper}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-tickets"></i>
                            备注
                        </template>
                        {{detail_data.remark}}
                    </el-descriptions-item>

                </el-descriptions>
            </el-dialog>



        <el-row style="float: right;margin: 0">
            <label>当前为第{{page_select.current_page}}页，共计{{page_select.total_page}}页</label>
            <el-form :inline="true">
                <el-form-item>
                    <el-button type="primary" icon="el-icon-arrow-left" @click="decrease_page()" size="mini">上一页</el-button>
                    <el-button type="primary" @click="increase_page()" size="mini">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                    <el-input type="primary" placeholder="请输入页码" style="max-width: 120px" size="mini"
                              v-model="page_select.page_input"
                    ></el-input>
                    <el-button type="primary" @click="change_page()" size="mini">Go!</el-button>
                </el-form-item>
            </el-form>
        </el-row>
        </div>
    </div></div>
</template>

<script>
    import change_detail_dialog from "@/components/sub-div/checkin_dialog/change_detail_dialog";
    import new_person_dialog from "@/components/sub-div/checkin_dialog/new_person_dialog";
    import qs from 'qs'
    import axios from "axios";

    export default {
        name: "checkin",
        components: {change_detail_dialog, new_person_dialog},
        mounted(){
            this.search_person(4,1);
        },
        data(){
            return{
                form_search:{
                    person_name:'',

                },
                person_list:[],

                selected_person:'',
                page_select:{
                    page_input:'',
                    current_page:1,
                    search_type:1,
                    total_page:1,
                },
                detail_data:{

                },
                detail_dialog_visible:false,
            }
        },
        methods: {
            search_person(type,page) {
                if(this.$data.page_select.search_type!==type){
                    this.$data.page_select.current_page = 1;
                }else{
                    this.$data.page_select.current_page = page;
                }
                this.$data.page_select.search_type = type;

                // 查询类型：1代表所有活力老人
                // 查询类型：2代表所有自理老人
                // 查询类型：3代表所有护理老人
                // 查询类型：4代表按照名字查找老人
                if(this.$data.page_select.search_type===4){
                    let obj={
                        "name":this.$data.form_search.person_name,
                        "page":this.$data.page_select.current_page,
                    };
                    axios({
                        method:'post',
                        url:'/api/checkin_page/search_person_by_name',
                        data:qs.stringify(obj),
                    }).then(res=>{
                        // console.log(res);
                        if(res.data.rs===true) {
                            this.$data.person_list = res.data.data.person_list;
                            this.$data.page_select.total_page = res.data.data.total_page;
                        }else{
                            this.$data.person_list=[];
                            this.$data.page_select.total_page=1;
                            alert("搜索失败！message="+res.data.errMsg);
                        }
                    });
                }else{
                    let str;
                    switch (this.$data.page_select.search_type) {
                        case 1:str="活力老人";break;
                        case 2:str="自理老人";break;
                        default:case 3:str="护理老人";break;
                    }
                    let obj={
                        "type":str,
                        "page":this.$data.page_select.current_page,
                    };
                    axios({
                        method:'post',
                        url:'/api/checkin_page/search_person_by_type',
                        data:qs.stringify(obj),
                    }).then(res=>{
                        if(res.data.rs===true){
                            this.$data.person_list=res.data.data.person_list;
                            this.$data.page_select.total_page=res.data.data.total_page;
                        }else {
                            this.$data.person_list=[];
                            this.$data.page_select.total_page=1;
                            alert("搜索失败！message="+res.data.errMsg);
                        }
                    });

                }
            },
            handleCheckinDialogOpen(){
                this.$refs.new_person_dialog.handleCheckinDialogOpen();
            },
            handleChangeDialogOpen(row) {
                this.$refs.change_detail_dialog.handleChangeDialogOpen(row);
            },
            handleDetailDialogOpen(row){
                this.$data.detail_dialog_visible=true;
                this.$data.detail_data=row;
            },
            handleDelete(row) {
                this.$confirm('此操作将永久删除该条信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios({
                        method:'post',
                        url:'/api/checkin_page/delete_person_by_id',
                        data:qs.stringify({"id":row.id}),
                    }).then(res=>{
                        if(res.data.rs===true) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!',
                            });
                        }else{
                            this.$message({
                                type: 'error',
                                message: '删除失败：'+res.data.errMsg,
                            });
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            handleCurrentChange() {
            },
            change_page(){
                let num=parseInt(this.$data.page_select.page_input);
                if(isNaN(num)){
                    alert("请输入正确的数字！");
                    this.$data.page_select.page_input='';
                }else if(num<=0){
                    alert("请输入正整数！");
                    this.$data.page_select.page_input='';
                }else{
                    this.$data.page_select.current_page=num;
                    this.search_person(this.$data.page_select.search_type,this.$data.page_select.current_page);
                }
            },
            increase_page(){
                this.$data.page_select.current_page++;
                this.search_person(this.$data.page_select.search_type,this.$data.page_select.current_page);
            },
            decrease_page(){
                if(this.$data.page_select.current_page>1){
                    this.$data.page_select.current_page--;
                }
                this.search_person(this.$data.page_select.search_type,this.$data.page_select.current_page);
            },
        }

    }
</script>

<style scoped>
    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 160px;
    }
    .bg-purple {
        background: #d3dce6;
    }
    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }
    .bg-purple-dark {
        background: #99a9bf;
    }
    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
</style>
